<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
<template>
    <view>
        <view class="uni-padding-wrap uni-common-mt">
            <view class="uni-title uni-common-mt">
                flex-direction: row
                <text>\n横向布局</text>
            </view>
            <view class="uni-flex uni-row">
                <view class="flex-item uni-bg-red">A</view>
                <view class="flex-item uni-bg-green">B</view>
                <view class="flex-item uni-bg-blue">C</view>
            </view>
            <view class="uni-title uni-common-mt">
                flex-direction: column
                <text>\n纵向布局</text>
            </view>
            <view class="uni-flex uni-column">
                <view class="flex-item flex-item-V uni-bg-red">A</view>
                <view class="flex-item flex-item-V uni-bg-green">B</view>
                <view class="flex-item flex-item-V uni-bg-blue">C</view>
            </view>
        </view>
    </view>
</template>


<script setup>


</script>

<style lang="scss" scoped>
 /* ========== 统一间距 ========== */
 page {
   background-color: #f8f8f8;
 }
 .uni-padding-wrap {
   padding: 30rpx;
 }
 .uni-common-mt {
   margin-top: 30rpx;
 }
 .uni-title {
   font-size: 32rpx;
   color: #333;
   line-height: 1.8;
 }
 
 /* ========== flex 容器 ========== */
 .uni-flex {
   display: flex;
   border-radius: 12rpx;
   overflow: hidden;
   box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
 }
 .uni-row {
   flex-direction: row;
 }
 .uni-column {
   flex-direction: column;
 }
 
 /* ========== 子项公共样式 ========== */
 .flex-item,
 .flex-item-V {
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 40rpx;
   color: #fff;
   font-weight: 600;
 }
 .flex-item {
   flex: 1;
   height: 120rpx;
 }
 .flex-item-V {
   flex: 1;
   height: 100rpx;
 }
 
 /* ========== 背景色 ========== */
 .uni-bg-red {
   background: #ff5a5f;
 }
 .uni-bg-green {
   background: #19be6b;
 }
 .uni-bg-blue {
   background: #2979ff;
 }
</style>
